<template>
  <div class="message-list-container">
    <h2>我的消息</h2>
    
    <el-row :gutter="20">
      <!-- 左侧联系人列表 -->
      <el-col :span="6">
        <el-card class="contact-list-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span>对话列表</span>
              <el-button type="primary" size="small" @click="loadContacts">刷新</el-button>
            </div>
          </template>
          
          <el-empty v-if="contactList.length === 0 && !loading" description="暂无消息"></el-empty>
          
          <div v-else class="contact-list">
            <div 
              v-for="contact in contactList" 
              :key="contact.userId" 
              class="contact-item"
              :class="{'active': currentContact && currentContact.userId === contact.userId}"
              @click="selectContact(contact)"
            >
              <div class="contact-avatar">
                <el-avatar :size="40" :icon="UserFilled"></el-avatar>
                <div v-if="contact.unreadCount > 0" class="unread-badge">{{contact.unreadCount}}</div>
              </div>
              <div class="contact-info">
                <div class="contact-name">
                  {{ contact.name }}
                  <el-tag size="small" v-if="contact.userType === 'company'">企业</el-tag>
                  <el-tag size="small" type="success" v-else>零工</el-tag>
                </div>
                <div class="contact-preview">{{ contact.lastMessage }}</div>
              </div>
              <div class="contact-time">{{ formatMessageTime(contact.lastTime) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧消息内容 -->
      <el-col :span="18">
        <el-card class="message-content-card" v-loading="loading">
          <template #header>
            <div class="card-header">
              <span v-if="currentContact">
                {{ currentContact.name }} 
                <el-tag size="small" v-if="currentContact.userType === 'company'">企业</el-tag>
                <el-tag size="small" type="success" v-else>零工</el-tag>
                <span v-if="taskInfo" class="task-info-tag">
                  关联任务: {{ taskInfo }}
                </span>
              </span>
              <span v-else>选择联系人开始对话</span>
            </div>
          </template>
          
          <el-empty v-if="!currentContact" description="请从左侧选择对话"></el-empty>
          
          <div v-else>
            <div class="message-chat-container">
              <div ref="chatContainer" class="message-chat-list">
                <div v-if="currentMessages.length === 0" class="empty-chat">
                  <el-empty description="暂无消息记录，发送消息开始对话"></el-empty>
                </div>
                <div 
                  v-for="(msg, index) in currentMessages" 
                  :key="msg.id"
                  class="message-bubble"
                  :class="getMessageClass(msg)"
                >
                 
                 
                  <div class="debug-info" v-if="showDebugInfo">
                    发送者ID: {{msg.senderId}} | 当前用户ID: {{currentUserIdNum}}
                  </div>
                  

                  <div class="message-time" v-if="showMessageDate(msg, index)">
                    {{ formatDate(msg.createTime) }}
                  </div>
                  <div class="message-wrapper">
                    <div class="message-content">
                      <p>{{ msg.content }}</p>
                    </div>
                    <div class="message-status">
                      <span v-if="!msg.isRead && msg.senderId !== currentUserIdNum" class="unread-tag">未读</span>
                      <span class="message-time-small">{{ formatMessageTime(msg.createTime) }}</span>
                      <div v-if="msg.taskId" class="message-task">
                        <el-button 
                          link 
                          size="small" 
                          @click="handleViewTask(msg.taskId)"
                        >
                          任务详情
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="message-input-container">
                <div v-if="replyForm.taskId" class="task-tip">
                  当前对话关联任务ID: {{ replyForm.taskId }}
                  <el-button 
                    type="text" 
                    size="small" 
                    @click="handleViewTask(replyForm.taskId)"
                  >
                    查看任务
                  </el-button>
                </div>
                <el-form :model="replyForm" ref="replyFormRef" :rules="replyRules">
                  <el-form-item prop="content">
                    <el-input
                      v-model="replyForm.content"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入消息内容"
                      @keyup.enter.ctrl="handleSendReply"
                    />
                  </el-form-item>
                  <el-form-item>
                    <div class="send-tips">提示: 按 Ctrl+Enter 发送消息</div>
                    <el-button type="primary" @click="handleSendReply">发送</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getMessageList, markAsRead, sendMessage, getContactList, getConversation } from '@/api/message'
import { formatDate } from '@/utils/format'
import { UserFilled } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 消息功能配置
const MESSAGE_CONFIG = {
  // 轮询间隔（毫秒）
  pollingInterval: 5000000,
  // 是否开启调试模式
  debug: true
}

const router = useRouter()
const loading = ref(false)
const contactList = ref([])
const currentContact = ref(null)
const taskInfo = ref('')
const currentMessages = ref([])
const chatContainer = ref(null)
const replyForm = ref({
  receiverId: null,
  taskId: null,
  content: ''
})
const replyRules = {
  content: [
    { required: true, message: '请输入消息内容', trigger: 'blur' }
  ]
}
const replyFormRef = ref(null)
const userType = ref(localStorage.getItem('userType') || 'worker')

// 调试模式开关
const showDebugInfo = ref(MESSAGE_CONFIG.debug);

// 直接从localStorage获取用户ID并转换为数字
const rawUserId = localStorage.getItem('userId')
console.log('从localStorage获取的原始用户ID:', rawUserId)

/**
 * 首先尝试从localStorage获取
 * 如果都失败，则使用硬编码默认值确保功能正常
 */
const getCurrentUserId = () => {
  // 从localStorage中获取
  const storedId = localStorage.getItem('userId');
  if (storedId) {
    console.log('从localStorage获取到用户ID:', storedId);
    return parseInt(storedId);
  }
  

  
  //从用户类型来确定用户ID 这个id用来区分样式
  const userType = localStorage.getItem('userType') || '';
  let defaultUserId = null;
  
  if (userType === 'worker') {
    defaultUserId = 2; // 零工用户默认ID
    console.log('使用默认零工用户ID:', defaultUserId);
  } else if (userType === 'company') {
    defaultUserId = 1; // 企业用户默认ID
    console.log('使用默认企业用户ID:', defaultUserId);
  } else {
    // 如果无法确定用户类型，使用通用默认ID
    defaultUserId = 2; // 默认使用ID 2，确保消息显示在右侧
    console.log('无法确定用户类型，使用通用默认ID:', defaultUserId);
  }
  
  // 将默认ID保存到localStorage
  localStorage.setItem('userId', defaultUserId);
  return defaultUserId;
};

// 初始化用户ID
const userId = ref(getCurrentUserId());
console.log('初始化后的用户ID:', userId.value);

// 创建一个计算属性，用于判断消息发送者
const currentUserIdNum = computed(() => userId.value);

// 用于判断是否是自己发送的消息
const isSelfMessage = (message) => {
  if (!message || !message.senderId || !currentUserIdNum.value) return false;
  return parseInt(message.senderId) === currentUserIdNum.value;
};

// 格式化消息时间
const formatMessageTime = (time) => {
  if (!time) return '';
  
  const now = dayjs();
  const messageTime = dayjs(time);
  
  if (now.diff(messageTime, 'day') === 0) {
    // 今天
    return messageTime.format('HH:mm');
  } else if (now.diff(messageTime, 'day') === 1) {
    // 昨天
    return '昨天 ' + messageTime.format('HH:mm');
  } else if (now.diff(messageTime, 'year') === 0) {
    // 今年
    return messageTime.format('MM-DD HH:mm');
  } else {
    // 更早
    return messageTime.format('YYYY-MM-DD HH:mm');
  }
};

// 判断是否显示日期分割线
const showMessageDate = (message, index) => {
  if (index === 0) return true;
  
  const currentDate = dayjs(message.createTime).format('YYYY-MM-DD');
  const prevDate = dayjs(currentMessages.value[index - 1].createTime).format('YYYY-MM-DD');
  
  return currentDate !== prevDate;
};

/**
 用户的id和发送的id是一致的才可以区分样式
 */
const getMessageClass = (message) => {
  // 使用isSelfMessage函数判断是否是自己发送的消息
  const isSelf = isSelfMessage(message);
  return {
    'self-message': isSelf,   // 右侧样式
    'other-message': !isSelf  // 左侧样式
  };
};

/**
 * 滚动到最新消息
 * 用于确保新消息出现时，聊天窗口自动滚动到底部
 */
const scrollToBottom = () => {
  nextTick(() => {
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
    }
  });
};

/**
 * 加载联系人列表
 * 从服务器获取所有联系过的用户列表
 */
const loadContacts = async () => {
  loading.value = true;
  try {
    const response = await getContactList();
    if (response.code === 200 && response.data) {
      contactList.value = response.data;
    } else {
      ElMessage.error(response.message || '获取联系人列表失败');
    }
  } catch (error) {
    console.error('加载联系人列表失败:', error);
    ElMessage.error('获取联系人列表失败: ' + (error.message || '未知错误'));
  } finally {
    loading.value = false;
  }
};

// 先选中联系人才会执行一下的操作
const selectContact = async (contact) => {
  currentContact.value = contact;
  
  // 设置回复表单数据
  replyForm.value.receiverId = contact.userId;
  replyForm.value.taskId = contact.taskId || null;
  replyForm.value.content = '';
  
  taskInfo.value = contact.taskTitle || '';
  
  // 加载对话消息
  await loadConversationMessages(contact.userId);
  
  // 滚动到最新消息
  scrollToBottom();
};

// 消息加载函数
const loadConversationMessages = async (contactId) => {
  loading.value = true;
  try {
    const response = await getConversation(contactId);
    if (response.code === 200 && response.data) {
      // 预处理消息数据，确保ID是数字类型，避免类型不一致导致的比较错误
      const messages = response.data.map(msg => ({
        ...msg,
        senderId: parseInt(msg.senderId),
        receiverId: parseInt(msg.receiverId)
      }));
      
      currentMessages.value = messages;
      
      // 自动标记消息为已读
      await markUnreadMessages();
    } else {
      ElMessage.error(response.message || '获取对话消息失败');
    }
  } catch (error) {
    console.error('加载对话消息失败:', error);
    ElMessage.error('获取对话消息失败: ' + (error.message || '未知错误'));
  } finally {
    loading.value = false;
  }
};

/**
 * 标记未读消息为已读
 * 
 * 处理逻辑：
 * 1. 筛选出当前用户接收的未读消息
 * 2. 调用API将每条消息标记为已读
 * 3. 更新本地消息状态和未读计数
 * 
 * 注意：仅标记接收者是当前用户的消息，避免API错误
 */
const markUnreadMessages = async () => {
  if (!currentUserIdNum.value) {
    console.warn('当前用户ID不可用，无法标记消息为已读');
    return;
  }
  
  const currentUserId = currentUserIdNum.value;
  
  // 只标记接收者是当前用户的未读消息
  const unreadMessages = currentMessages.value.filter(msg => {
    return !msg.isRead && 
           !isSelfMessage(msg) && 
           parseInt(msg.receiverId) === currentUserId;
  });
  
  if (unreadMessages.length === 0) return;
  
  console.log(`准备标记 ${unreadMessages.length} 条消息为已读`);
  
  for (const msg of unreadMessages) {
    try {
      const response = await markAsRead(msg.id);
      if (response && response.code === 200) {
        msg.isRead = true;
        console.log(`消息 ${msg.id} 已标记为已读`);
      } else {
        console.error(`标记消息 ${msg.id} 已读失败:`, response?.message || '未知错误');
      }
    } catch (error) {
      console.error(`标记消息 ${msg.id} 已读失败:`, error);
    }
  }
  
  // 更新联系人未读消息数量
  if (currentContact.value) {
    currentContact.value.unreadCount = 0;
  }
};

/**
 * 发送消息处理函数
 */
const handleSendReply = async () => {
  if (!replyForm.value.content.trim()) {
    ElMessage.warning('请输入消息内容');
    return;
  }
  
  try {
    await replyFormRef.value.validate();
    
    const messageData = {
      receiverId: replyForm.value.receiverId,
      taskId: replyForm.value.taskId,
      content: replyForm.value.content.trim()
    };
    
    const response = await sendMessage(messageData);
    
    if (response.code === 200 && response.data) {
      // 清空输入框
      replyForm.value.content = '';
      
      // 添加到消息列表
      const newMessage = {
        id: response.data,
        senderId: currentUserIdNum.value, // 动态使用当前用户ID
        receiverId: parseInt(replyForm.value.receiverId),
        taskId: replyForm.value.taskId,
        content: messageData.content,
        isRead: true, // 自己发送的消息默认已读
        createTime: new Date().toISOString(),
        senderName: localStorage.getItem('username') || '我'
      };
      
      currentMessages.value.push(newMessage);
      
      // 更新联系人列表中的最后一条消息
      updateContactLastMessage(newMessage);
      
      // 滚动到最新消息
      scrollToBottom();
    } else {
      ElMessage.error(response.message || '发送消息失败');
    }
  } catch (error) {
    console.error('发送消息失败:', error);
    ElMessage.error('发送消息失败: ' + (error.message || '未知错误'));
  }
};

/**
 * 更新联系人最后一条消息
 * 
 * 功能：
 * 1. 更新联系人列表中对应联系人的最后消息内容和时间
 * 2. 将这个联系人移到列表顶部（最近联系优先）
 */
const updateContactLastMessage = (message) => {
  if (!contactList.value || contactList.value.length === 0) return;
  
  const receiverId = parseInt(message.receiverId);
  const contactIndex = contactList.value.findIndex(
    c => parseInt(c.userId) === receiverId
  );
  
  if (contactIndex !== -1) {
    contactList.value[contactIndex].lastMessage = message.content;
    contactList.value[contactIndex].lastTime = message.createTime;
    
    // 将此联系人移到列表顶部
    const contact = contactList.value.splice(contactIndex, 1)[0];
    contactList.value.unshift(contact);
  }
};

/**
 * 查看任务详情
 * 跳转到关联任务的详情页面
 */
const handleViewTask = (taskId) => {
  router.push(`/task/${taskId}`);
};

/**
 * 更新联系人未读消息计数
 * 
 * 功能：
 * 1. 查找对应发送者的联系人
 * 2. 增加其未读消息计数
 * 3. 如果联系人不在列表中，刷新整个列表
 */
const updateContactUnreadCount = (senderId) => {
  senderId = parseInt(senderId);
  const contact = contactList.value.find(c => parseInt(c.userId) === senderId);
  if (contact) {
    contact.unreadCount = (contact.unreadCount || 0) + 1;
  } else {
    // 如果联系人不在列表中，刷新联系人列表
    loadContacts();
  }
};

// 使用轮询方式获取新消息
let pollingTimer = null;
const pollingInterval = MESSAGE_CONFIG.pollingInterval; // 轮询间隔

// 启动轮询
const startPolling = () => {
  if (pollingTimer) {
    clearInterval(pollingTimer);
  }
  pollingTimer = setInterval(pollMessages, pollingInterval);
  console.log('已启动消息轮询，间隔:', pollingInterval);
};

// 停止轮询
const stopPolling = () => {
  if (pollingTimer) {
    clearInterval(pollingTimer);
    pollingTimer = null;
    console.log('已停止消息轮询');
  }
};

// 轮询新消息
const pollMessages = async () => {
  if (!currentUserIdNum.value) {
    console.warn('当前用户ID不可用，无法轮询消息');
    return;
  }
  
  try {
    // 如果当前有选中的联系人，则刷新对话
    if (currentContact.value) {
      console.log('轮询检查新消息...');
      await loadConversationMessages(currentContact.value.userId);
    } else {
      // 如果没有选中联系人，刷新联系人列表，更新未读计数
      await loadContacts();
    }
  } catch (error) {
    console.error('轮询消息失败:', error);
  }
};

// 处理新消息（用于将来可能的扩展）
const processNewMessage = (message) => {
  const currentUserId = currentUserIdNum.value;
  
  // 确保ID为数字类型
  if (message.senderId && typeof message.senderId === 'string') {
    message.senderId = parseInt(message.senderId);
  }
  if (message.receiverId && typeof message.receiverId === 'string') {
    message.receiverId = parseInt(message.receiverId);
  }
  
  // 判断消息是否属于当前会话
  const contactUserId = message.senderId === currentUserId ? message.receiverId : message.senderId;
  const isCurrentConversation = currentContact.value && 
                              (parseInt(currentContact.value.userId) === contactUserId);
  
  console.log(`新消息 - 发送者: ${message.senderId}, 接收者: ${message.receiverId}, 当前用户: ${currentUserId}, 当前联系人: ${currentContact.value?.userId}, 是当前会话: ${isCurrentConversation}`);
  
  if (isCurrentConversation) {
    // 如果是当前会话，直接添加到消息列表
    currentMessages.value.push(message);
    nextTick(() => {
      scrollToBottom();
    });
    
    // 如果不是自己发送的消息，则标记为已读
    if (message.senderId !== currentUserId) {
      markAsRead(message.id)
        .then(res => {
          if (res && res.code === 200) {
            message.isRead = true;
            console.log(`实时标记消息 ${message.id} 为已读`);
          }
        })
        .catch(err => console.error('标记消息已读失败:', err));
    }
  } else {
    // 如果不是当前会话，更新联系人列表中的未读计数
    // 查找相关联系人并更新其最后一条消息和未读计数
    const contactToUpdate = contactList.value.find(c => parseInt(c.userId) === contactUserId);
    if (contactToUpdate) {
      // 更新最后一条消息
      contactToUpdate.lastMessage = message.content;
      contactToUpdate.lastTime = message.createTime;
      
      if (message.senderId !== currentUserId) {
        // 仅当消息不是当前用户发送时才增加未读计数
        contactToUpdate.unreadCount = (contactToUpdate.unreadCount || 0) + 1;
        
        // 将此联系人移到列表顶部
        const index = contactList.value.findIndex(c => parseInt(c.userId) === contactUserId);
        if (index > 0) {
          const contact = contactList.value.splice(index, 1)[0];
          contactList.value.unshift(contact);
        }
        
        // 添加通知提醒
        ElMessage.info(`收到来自${contactToUpdate.name}的新消息`);
      }
    } else {
      // 如果联系人不在列表中，重新加载联系人列表
      loadContacts();
    }
  }
};

/**
 * 监听当前联系人变化
 * 当选择不同联系人时，重置其未读消息计数
 */
watch(currentContact, () => {
  if (currentContact.value) {
    const contactId = parseInt(currentContact.value.userId);
    const contact = contactList.value.find(c => parseInt(c.userId) === contactId);
    if (contact) {
      contact.unreadCount = 0;
    }
  }
});

/**
 * 组件挂载时执行
 */
onMounted(async () => {
  // 确保用户ID可用
  if (!userId.value) {
    // 重新尝试获取用户ID
    userId.value = getCurrentUserId();
    console.log('组件挂载时重新获取用户ID:', userId.value);
  }
  
  // 如果仍然没有获取到用户ID，给出警告
  if (!userId.value) {
    console.warn('无法获取用户ID，某些功能可能无法正常工作');
    // 最后的应急方案：设置一个默认ID确保功能可用
    userId.value = 2; // 默认使用ID为2
    localStorage.setItem('userId', '2');
    console.log('使用应急默认用户ID: 2');
  }
  
  // 加载联系人列表
  loadContacts();
  
  // 启动轮询
  startPolling();
});

/**
 * 组件卸载时执行
 */
onBeforeUnmount(() => {
  // 停止轮询
  stopPolling();
});
</script>

<style scoped>
/**
 * 主容器样式
 */
.message-list-container {
  padding: 20px;
}

/**
 * 卡片头部样式
 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-list-card, .message-content-card {
  height: calc(100vh - 180px);
}

.contact-list {
  height: calc(100% - 20px);
  overflow-y: auto;
}

.contact-item {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.contact-item:hover {
  background-color: #f5f7fa;
}

.contact-item.active {
  background-color: #ecf5ff;
}

.contact-avatar {
  position: relative;
  margin-right: 10px;
}

.unread-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}

.contact-info {
  flex: 1;
  overflow: hidden;
}

.contact-name {
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

.contact-name .el-tag {
  margin-left: 5px;
}

.contact-preview {
  font-size: 12px;
  color: #909399;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-time {
  font-size: 12px;
  color: #909399;
  min-width: 80px;
  text-align: right;
}

.message-chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 250px);
}

.message-chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.message-bubble {
  margin-bottom: 20px;
  position: relative;
  clear: both;
  overflow: hidden;
}

.message-time {
  text-align: center;
  margin: 10px 0;
  font-size: 12px;
  color: #909399;
  clear: both;
}

.message-wrapper {
  max-width: 80%;
  position: relative;
}

/**
 * 消息气泡样式
 * 
 * 两种主要样式：
 * 1. self-message - 右侧显示，绿色背景，右上角带箭头
 * 2. other-message - 左侧显示，白色背景，左上角带箭头
 */
.self-message {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.other-message {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.message-content {
  padding: 10px 15px;
  border-radius: 8px;
  word-break: break-word;
  position: relative;
  margin-bottom: 2px;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 右侧消息样式 - 绿色气泡 */
.self-message .message-content {
  background-color: #95ec69;
  color: #333;
  border-top-right-radius: 0;
  text-align: left;
  margin-left: 20px;
}

/* 右侧消息的气泡箭头 */
.self-message .message-content::before {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid #95ec69;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* 左侧消息样式 - 白色气泡 */
.other-message .message-content {
  background-color: #ffffff;
  color: #333;
  border-top-left-radius: 0;
  margin-right: 20px;
  border: 1px solid #ebeef5;
}

/* 左侧消息的气泡箭头 */
.other-message .message-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 0;
  height: 0;
  border-right: 10px solid #ffffff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.message-status {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.self-message .message-status {
  justify-content: flex-end;
  padding-right: 5px;
}

.other-message .message-status {
  justify-content: flex-start;
  padding-left: 5px;
}

.unread-tag {
  display: inline-block;
  background-color: #f56c6c;
  color: white;
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 10px;
  margin-right: 5px;
}

.message-time-small {
  color: #c0c4cc;
}

.message-task {
  display: inline-block;
  margin-left: 10px;
}

.message-input-container {
  padding: 10px;
  border-top: 1px solid #f0f0f0;
}

.send-tips {
  font-size: 12px;
  color: #909399;
  margin-right: 10px;
  float: left;
}

.empty-chat {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .el-row {
    display: flex;
    flex-direction: column;
  }
  
  .el-col {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .contact-list-card, .message-content-card {
    height: auto;
  }
  
  .contact-list {
    max-height: 250px;
  }
  
  .message-chat-list {
    max-height: 300px;
  }
}

.task-info-tag {
  margin-left: 10px;
  font-size: 12px;
  color: #909399;
  background-color: #f4f4f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.task-tip {
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f0f9eb;
  color: #67c23a;
  border-radius: 4px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 调试信息样式 */
.debug-info {
  font-size: 10px;
  color: #909399;
  background-color: #f4f4f5;
  padding: 2px 4px;
  border-radius: 2px;
  margin-bottom: 4px;
  opacity: 0.6;
}
</style> 